<template>
	<view class="shopAddProduct">
		<view class="shopAddProduct-main">
			<view class="shopAddProduct-main-headBox">
				<view class="shopAddProduct-li shopAddProduct-li-no shopAddProduct-title">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">产品名称</text>
					</view>
					<view class="shopAddProduct-title-inp">
						<input v-model="put.partsName" class="shopAddProduct-title-inp-box" placeholder-class="inputplace" placeholder="请输入产品标题"
							type="text" value="" />
					</view>
				</view>
				<view class="shopAddProduct-li shopAddProduct-li-no shopAddProduct-title">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">详细描述</text>
					</view>
					<view class="shopAddProduct-title-inp">
						<input v-model="put.partsDetails" class="shopAddProduct-title-inp-box"
							placeholder-class="inputplace" placeholder="请输入关于产品的详细描述……" type="text" value="" />
					</view>
				</view>
			</view>
			<view class="shopAddProduct-li shopAddProduct-title">
				<view class="flex-bt">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">分类</text>
					</view>
					<view class="shopAddProduct-li-con" @click="cli_classify">
						<input v-model="fenlei" disabled  placeholder-class="inputplace" class="shopAddProduct-li-con-txt" type="text"
							placeholder="请选择产品分类" value="" />
						<image v-if="show_flimg" class="shopAddProduct-li-con-img"
							src="../../static/manufacturers/btm.png" mode="">
						</image>
						<image v-else class="shopAddProduct-li-con-img" src="../../static/manufacturers/top.png"
							mode="">
						</image>

					</view>
				</view>
			</view>

			<view class="shopAddProduct-li shopAddProduct-title">
				<view class="flex-bt">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">单位</text>
					</view>
					<view class="shopAddProduct-li-con">
						<input v-model="put.partsUnit" class="shopAddProduct-li-con-txt"  placeholder-class="inputplace" type="text"
							placeholder="请输入产品单位（个，箱……）" value="" />
					</view>
				</view>
			</view>
			<view class="shopAddProduct-li shopAddProduct-title">
				<view class="flex-bt">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">规格</text>
					</view>
					<view class="shopAddProduct-li-showxing" v-if="list_model.length > 0">
						<view class="shopAddProduct-li-showxing-imgbox">
							<image v-for="(item, index) of list_model.slice(0,3)" :key="index"
								class="shopAddProduct-li-showxing-img" :src=item.attributeLogo mode=""></image>
						</view>
						<view class="shopAddProduct-li-showxing-txt font_blod" @click="cli_addModel">
							{{list_model.length}}个规格
						</view>
					</view>
					<view v-else class="shopAddProduct-li-con" @click="cli_addModel">
						<image class="shopAddProduct-li-con-img-jia" src="https://www.zzzsyh.com/applets/agent/agent/add.png" mode=""></image>
						<text class="shopAddProduct-li-con-txt shopAddProduct-li-con-txt2">新增规格</text>
					</view>
				</view>
			</view>
			<!-- <view class="shopAddProduct-li shopAddProduct-title">
				<view class="flex-bt">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">热推</text>
					</view>
					<view class="shopAddProduct-li-con">
						<switch class="shopAddProduct-li-con-switch" checked color="#28CD50" @change="switch1Change" />
					</view>
				</view>
			</view>
			<view class="shopAddProduct-li shopAddProduct-title">
				<view class="flex-bt">
					<view class="shopAddProduct-tit">
						<image class="shopAddProduct-tit-img" src="https://www.zzzsyh.com/applets/agent/agent/xing.png" mode=""></image>
						<text class="shopAddProduct-tit-txt">包邮</text>
					</view>
					<view class="shopAddProduct-li-con">
						<switch class="shopAddProduct-li-con-switch" checked color="#28CD50" @change="switch2Change" />
					</view>
				</view>
			</view> -->

			<view class="shopAddProduct-upimg">
				<view class="shopAddProduct-upimg-box">
					<image v-if="put.partsImages" class="shopAddProduct-upimg-img" @click="previewImage(put.partsImages)" :src=put.partsImages mode=""></image>
					<image @click="cli_close_partsImages" v-if="put.partsImages" class="shopAddProduct-upimg-close"
						src="https://www.zzzsyh.com/applets/agent/agent/close_3.png" mode="">
					</image>
					<image v-else @click="cli_upimg()" class="shopAddProduct-upimg-img"
						src="https://www.zzzsyh.com/applets/agent/agent/upimg.png" mode=""></image>
				</view>

			</view>
		</view>
		<view class="">
			<view class="shopAddProduct-btnbox font_blod" v-if="ok_btn">
				<view @click="cli_ok_btn(0)" class="shopAddProduct-btnbox-left shopAddProduct-btnbox-right-ok">
					保存
				</view>
				<view @click="cli_ok_btn(1)" class="shopAddProduct-btnbox-right shopAddProduct-btnbox-right-ok">
					立即上架
				</view>
			</view>

			<view class="shopAddProduct-btnbox font_blod" v-else @click="cli_no_btn">
				<view class="shopAddProduct-btnbox-left">
					保存
				</view>
				<view class="shopAddProduct-btnbox-right">
					立即上架
				</view>
			</view>



		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop-classify">
				<view class="pop-classify-title">
					<view class="pop-classify-title-left">

					</view>
					<view class="pop-classify-title-cen">
						请选择分类
					</view>
					<view class="pop-classify-title-right" @click="cli_close_ji">
						<image class="pop-classify-title-rightimg" src="https://www.zzzsyh.com/applets/agent/agent/close.png" mode=""></image>
					</view>
				</view>
				<view class="pop-classify-two" v-if="yiji">
					<view @click="cli_yiji" class="pop-classify-two-box" v-if="yiji">
						{{yiji}}
					</view>
					<text class="pop-classify-two-txt" v-if="erji">/</text>
					<view class="pop-classify-two-box" v-if="erji">
						{{erji}}
					</view>
				</view>
				<view class="pop-classify-main">
					<scroll-view class="scroll-y" scroll-y="true">
						<view v-if="list_ji == 1" class="pop-classify-main-li" @click="cli_classify_yiji(item)"
							v-for="(item,index) in list_classify" :key="index">
							{{item.typeName}}
						</view>
						<view v-if="list_ji == 2" class="pop-classify-main-li" @click="cli_classify_erji(item)"
							v-for="(item,index) in list_classify_two" :key="index">
							{{item.typeName}}
						</view>
					</scroll-view>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				upimg: '',
				list_model: [],
				put: {
					partsId: '',
					agentId: uni.getStorageSync('agentId'),
					partsName: '',
					partsType: '',
					partsUnit: '',
					isHotPush: 1,
					isPost: 1,
					partsDetails: '',
					partsImages: ''
				},
				list_classify: [], // 分类数据
				list_classify_two: [], // 分类数据二级
				list_ji: '1',
				yiji: '',
				erji: '',
				erji_id: '',
				show_flimg: true, // 分类右边三角
			}
		},
		computed: {
			ok_btn() {
				let put = this.put
				if (put.partsId &&
					put.agentId &&
					put.partsName &&
					put.partsType &&
					put.partsUnit &&
					put.partsDetails &&
					put.partsImages &&
					this.list_model.length > 0) {
					return true
				} else {
					return false
				}
			},
			fenlei() {
				let val1 = this.yiji
				let val2 = this.erji
				let val3 = ''
				if (val1 && val2) {
					val3 = '/'
				} else {
					val3 = ''
				}
				return val1 + val3 + val2
			},
			...mapState({
				imageSrc:state=>state.image.src,
				imagePath:state=>state.image.path
			})
		},
		created() {

		},
		mounted() {
			this.obtainId()
			this.getPartsTypeByPid(0)
		},
		onShow() {
			if (this.put.partsId) {
				this.getAttributeListByPartsId(this.put.partsId)
			}
			if(this.imagePath=='shopAddProduct'){
				this.put.partsImages = this.imageSrc
			}
		},
		methods: {
			// 图片预览
			previewImage(item, index){
				console.log(item);
				let lis = item.split()
				wx.previewImage({
				  current: 0, // 当前显示图片的http链接
				  urls: lis // 需要预览的图片http链接列表
				})
			},
			switch1Change(e) {
				console.log(e);
				let val = e.target.value
				if (val) {
					this.put.isHotPush = 1
				} else {
					this.put.isHotPush = 0
				}
			},
			switch2Change(e) {
				let val = e.target.value
				if (val) {
					this.put.isPost = 1
				} else {
					this.put.isPost = 0
				}
			},
			cli_addModel() {
				let id = this.put.partsId
				uni.navigateTo({
					url: '/pages/shopAddProductAddModel/shopAddProductAddModel?id=' + id
				})
			},
			// 上传照片
			cli_upimg() {
				let _that = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;

						uni.navigateTo({
							url:'/pages/cutImage/cutImage?src='+tempFilePaths[0]
						})
						this.$store.commit('image/path/UPDATE','shopAddProduct')
					}
				});
				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		uni.uploadFile({
				// 			url: allapi.upload, //仅为示例，非真实的接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			success: (uploadFileRes) => {
				// 				console.log(uploadFileRes.data);
				// 				let dat = uploadFileRes.data
				// 				let msg = JSON.parse(dat)
				// 				let imgurl = msg.url
				// 				console.log(msg);
				// 				_that.put.partsImages = imgurl
				// 				console.log(_that.list);
				// 			}
				// 		});
				// 	}
				// });
			},
			// 删除照片
			cli_close_partsImages() {
				this.put.partsImages = ''
			},
			// 获取id
			obtainId() {
				uni.request({
					url: allapi.obtainId,
					success: (res) => {
						console.log(res);
						this.put.partsId = res.data.data
					}
				})
			},
			// 根据id 获取产品
			getAttributeListByPartsId(id) {
				uni.request({
					url: allapi.getAttributeListByPartsId,
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
						this.list_model = res.data.data
					}
				})
			},
			cli_no_btn() {
				console.log(this.put);
				console.log(this.list_model);
				uni.showToast({
					title: '请先完善相关信息',
					icon: 'none'
				})
			},
			cli_ok_btn(val) {
				console.log('完善信息了');
				this.saveMyParts(val)
			},
			// 保存产品
			saveMyParts(val) {
				uni.request({
					url: allapi.saveMyParts,
					data: {
						partsId: this.put.partsId,
						agentId: this.put.agentId,
						partsName: this.put.partsName,
						partsType: this.put.partsType,
						partsUnit: this.put.partsUnit,
						isHotPush: this.put.isHotPush,
						isPost: this.put.isPost,
						partsDetails: this.put.partsDetails,
						partsImages: this.put.partsImages,
						isShow: val
					},
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						uni.switchTab({
							url: '/pages/shop/shop'
						})
					}
				})
			},
			// 获取以及分类
			getPartsTypeByPid(pid) {
				uni.request({
					url: allapi.getPartsTypeByPid,
					data: {
						pid: pid
					},
					success: (res) => {
						console.log(res);
						if (pid == 0) {
							this.list_classify = res.data.data
						} else {
							this.list_classify_two = res.data.data
							console.log('是二级啊', this.list_classify_two, this.list_ji);
						}
					}
				})
			},
			// 点击打开分类选择
			cli_classify() {
				this.show_flimg = false
				this.$refs.popup.open()
			},
			cli_close_ji() {
				this.show_flimg = true
				this.$refs.popup.close()
				this.yiji = ''
				this.list_ji = 1
				this.erji = ''
				this.put.partsType = ''
			},
			cli_yiji() {
				this.erji = ''
				this.put.partsType = ''
				this.list_ji = 1
				this.getPartsTypeByPid(0)
			},
			// 点击一级分类
			cli_classify_yiji(item) {
				this.list_ji = 2
				this.yiji = item.typeName
				this.getPartsTypeByPid(item.id)
			},
			cli_classify_erji(item) {
				this.erji = item.typeName
				this.put.partsType = item.id
				this.show_flimg = true
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.flex-bt {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopAddProduct {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.shopAddProduct-main {
		flex: 1;
		overflow: auto;
		padding-bottom: 50rpx;
	}
	.shopAddProduct-main-headBox {
		background: #FFFFFF;
		margin: 24rpx 40rpx;
		border-radius: 20rpx;
	}
	.shopAddProduct-li {
		padding: 24rpx 24rpx 24rpx 0;
		background: #FFFFFF;
		margin: 24rpx 40rpx;
		border-radius: 20rpx;
	}
	.shopAddProduct-li-no {
		margin: 0;
	}
	.shopAddProduct-title {}

	.shopAddProduct-tit {
		display: flex;
		align-items: center;
		line-height: 40rpx;
	}

	.shopAddProduct-tit-img {
		width: 32rpx;
		height: 32rpx;
	}

	.shopAddProduct-tit-x {
		color: red;
		display: block;
	}

	.shopAddProduct-tit-txt {
		color: #666666;
		font-size: 28rpx;
		font-size: 28rpx;
	}

	.shopAddProduct-title-inp {
		margin: 24rpx 32rpx 0;
	}

	.shopAddProduct-title-inp-box {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.shopAddProduct-li-showxing {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.shopAddProduct-li-showxing-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}

	.shopAddProduct-li-showxing-txt {
		width: 134rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #F3F5F6;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.shopAddProduct-li-con {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: 24rpx;
	}

	.shopAddProduct-li-con-txt {
		font-weight: 400;
		color: #333333;
		font-size: 28rpx;
		text-align: right;
	}

	.shopAddProduct-li-con-txt2 {
		color: #666666;
	}

	.shopAddProduct-li-con-img {
		width: 23rpx;
		height: 23rpx;
		margin-left: 32rpx;
	}

	.shopAddProduct-li-con-img-jia {
		width: 34rpx;
		height: 34rpx;
	}

	.shopAddProduct-li-con-switch {
		scale: 0.6
	}

	.shopAddProduct-upimg {
		padding: 0 40rpx;
		display: flex;

	}

	.shopAddProduct-upimg-box {
		position: relative;
		width: 192rpx;
		height: 192rpx;
		border-radius: 16rpx;
	}

	.shopAddProduct-upimg-img {
		width: 192rpx;
		height: 192rpx;
		border-radius: 16rpx;
	}

	.shopAddProduct-upimg-close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}

	.shopAddProduct-btnbox {
		height: 120rpx;
		background: #FFFFFF;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.shopAddProduct-btnbox-left {
		width: 296rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #F3F5F6;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #333333;
		opacity: 0.6;
	}

	.shopAddProduct-btnbox-right {
		width: 296rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		opacity: 0.6;
	}

	.shopAddProduct-btnbox-right-ok {
		opacity: 1;
	}

	.pop-classify {
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
	}

	.pop-classify-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		height: 90rpx;
		border-bottom: 1rpx solid #ccc;
		padding: 0 30rpx;
		font-size: 36rpx;
		letter-spacing: 2rpx;
		font-weight: 600;
	}

	.pop-classify-title-left {
		width: 40rpx;
	}

	.pop-classify-title-rightimg {
		width: 40rpx;
		height: 40rpx;
	}

	.pop-classify-two {
		height: 30rpx;
		display: flex;
		align-items: center;
		margin: 10rpx;
		border-bottom: 1px dashed #eeeeee;
		padding: 20rpx 0 20rpx 10rpx;
		box-shadow: 5px 7px 8px #eeeeee;
	}

	.pop-classify-two-box {
		padding: 5rpx 10rpx;
		/* background: linear-gradient(45deg, #fbcbcb, #28cdce);
		color: #ffffff; */
		text-decoration: initial;
	}

	.pop-classify-two-txt {
		margin: 0 10rpx;
	}

	.pop-classify-main {
		flex: 1;
		margin: 0 40rpx;
		overflow: auto;
	}

	.scroll-y {
		height: 90%;
	}

	.pop-classify-main-li {
		font-size: 24rpx;
		color: #313131;
		margin: 19rpx 0;
		line-height: 50rpx;
		text-align: center;
	}
</style>
